<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/2
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid rgb(165, 184, 213);
        }
        th,
        td {
            text-align: center;
            padding: 8px;
        }
        th{
            background: rgb(165, 184, 213);
            color: white;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type = "checkbox"] {
            margin-right: 5px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        .pagination button {
            padding: 5px 10px;
        }
        .pagination span {
            padding: 5px 10px;
            background-color: #f0f0f0;
        }
        /* Modal styles */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 300px;
            text-align: center;
        }

        .modal-content h2 {
            margin: 0 0 20px;
        }

        .modal-content .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .modal-content .options button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        .modal-content .options button:hover {
            background-color: rgb(125, 166, 217);
        }

        .modal-content .close-button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 3px;
            background-color: #FF0000;
            color: white;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }

        .modal-content .close-button:hover {
            background-color: #8B0000;
        }
    </style>
</head>
<body>
<div>
</div>
<table id="courseTable">
    <tr>
        <th>课程图片</th>
        <th>名称</th>
        <th>教师</th>
        <th>类型</th>
        <th>价格</th>
        <th>人数</th>
        <th>时长</th>
        <th>上课时间</th>
        <th>审核状态</th>
    </tr>
</table>
<div class="pagination">
    <button id="firstPage">首页</button>
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
    <button id="lastPage">末页</button>
</div>
<script>

    $(document).ready(function () {
        let current = 1;
        const pageSize = 7; // 每页显示的记录数
        let totalPages = 1;
        function setColorByState(cell, state) {
            if (state == 0) {
                cell.css('color', 'pink');
            } else if (state == 1) {
                cell.css('color', 'green');
            } else if (state == 2) {
                cell.css('color','red');
            }
        }
        var state = sessionStorage.getItem('state');
        console.log(state);
        function fetchCourses(page) {
            current = page;
            var url = './teacher/list/state/'+state+'/'+page+'/'+pageSize;
            // 使用AJAX获取课程信息
            $.ajax({
                url: url,
                type: 'POST',
                contentType: "application/json",
                success: function (response) {
                    const data = response.data.list;
                    const total = response.data.total;
                    totalPages = Math.ceil(total / pageSize);
                    renderTable(data);
                    updatePagination(totalPages, page);
                },
                error: function () {
                    alert('获取课程信息失败');
                }
            });
        }
        function renderTable(data) {
            var table = $('#courseTable');
            table.find('tr:gt(0)').remove();
            data.forEach(function (course) {
                var row = $('<tr></tr>');
                var imgCell = $('<td></td>');
                var img = $('<img>', {
                    src: course.picture,
                    alt: '课程图片',
                    width: '100'
                });
                imgCell.append(img);
                row.append(imgCell);

                row.append($('<td></td>').text(course.classname));
                row.append($('<td></td>').text(course.classteacher));
                row.append($('<td></td>').text(course.classtype));
                row.append($('<td></td>').text(course.money));
                row.append($('<td></td>').text(course.number));
                row.append($('<td></td>').text(course.usertools));
                row.append($('<td></td>').text(course.time));
                // row.append($('<td></td>').text(course.state));
                var stateCell = $('<td></td>');
                var stateText = $('<button></button>');
                if(course.state == 1){
                    stateText.text("已通过");
                    stateText.click(function () {
                        update(course.id,(course.state+1)%3);
                    });
                }else if(course.state == 2){
                    stateText.text("未通过");
                    stateText.click(function () {
                        update(course.id,(course.state+1)%3);
                    });
                }else if(course.state == 0){
                    stateText.text("待审核");
                    stateText.click(function () {
                        showStateOptions(course.id);
                    });
                }
                setColorByState(stateCell, course.state);
                stateCell.append(stateText);
                row.append(stateCell);

                table.append(row);
            });
        }
        function updatePagination(totalPages, page) {
            $('#pageInfo').text(`第 ${page} 页 / 共 ${totalPages} 页`);
            $('#prevPage').prop('disabled', page === 1);
            $('#nextPage').prop('disabled', page === totalPages);
            $('#firstPage').prop('disabled', page === 1);
            $('#lastPage').prop('disabled', page === totalPages);
        }

        function showStateOptions(courseId) {
            // 创建一个简单的模态框
            var modal = $('<div></div>').addClass('modal').appendTo('body');
            var modalContent = $('<div></div>').addClass('modal-content').appendTo(modal);
            var header = $('<h3></h3>').text('选择审核状态').appendTo(modalContent);
            var options = $('<div></div>').appendTo(modalContent);
            var option1 = $('<button></button>').text('已通过').click(function () {
                update(courseId, 1);
                modal.remove();
            }).appendTo(options);
            var option2 = $('<button></button>').text('未通过').click(function () {
                update(courseId, 2);
                modal.remove();
            }).appendTo(options);
            var closeButton = $('<button></button>').text('关闭').click(function () {
                modal.remove();
            }).appendTo(modalContent);
        }
        function update(id,state){
            var statelist = {
                id: id,
                state:JSON.stringify(state)
            };
            $.ajax({
                url: './teacher/list/updateState',
                type: 'POST',
                data:JSON.stringify(statelist),
                contentType: "application/json",
                success: function (data) {
                    console.log(data.code ==200);
                    if(data.code == 200){
                        location.reload();
                    }
                },
                error: function () {
                    alert('修改失败');
                }
            });
        }
        $('#firstPage').click(function () {
            fetchCourses(1);
        });

        $('#prevPage').click(function () {
            if (current > 1) {
                current--;
                fetchCourses(current);
            }
        });

        $('#nextPage').click(function () {
            fetchCourses(current + 1);
        });

        $('#lastPage').click(function () {
            fetchCourses(totalPages);
        });

        // 初始化加载第一页数据
        fetchCourses(current);
    });
</script>
</body>
</html>
